<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
<%@include file="../meta.jsp" %>   
<script type="text/javascript">
<!--
		
	$(document).ready(function(){
		 
		$("#exchangeForm").validate({
			rules: {
				serialNo: "required",
				vcode: "required"
			},
			messages: {
				serialNo: "请填写电子券序列号",
				vcode: "请填写电子券验证码"
			},
			 submitHandler:function() {
			 
			 	$.ajax({
					   type: "POST",
					   dataType:"json",
					   url: "${pageContext.request.contextPath}/find-exchange",
					   data: "serialNo="+$("#serialNo").val()+ "&vcode="+$("#vcode").val()+ "&t="+Math.random(),
					   success: function(data){
						   if( data.code == 0 ){
						   //再次确定是否消费
						  	
					  	 	  art.dialog({
							  	title:"确认要消费此洗车券吗？",
							    lock: true,
							    background: '#000', // 背景色
							    opacity: 0.87,	// 透明度
							    content: "洗车券（序列号"+$("#serialNo").val()+"）",
							    icon: 'succeed',
							    ok: function () {
							    
							    	$.ajax({
										   type: "POST",
										   dataType:"json",
										   url: "${pageContext.request.contextPath}/do-exchange",
										   data: "serialNo="+$("#serialNo").val()+ "&vcode="+$("#vcode").val()+ "&t="+Math.random(),
										   success: function(responseText){
												if( responseText.code == 0 ){
											  	 	  art.dialog({ icon: 'succeed', title:"成功消费",content:"已消费洗车券（序列号"+$("#serialNo").val()+"）", lock: true,ok:true});
											   }else{
												   //有错误
												   art.dialog({ icon: 'error', title:"消费失败",content: responseText.msg, lock: true,ok:true});
											   }
											
										   }
										});
					
							        return true;
							    },
							    cancel: true
							});
						   }else{
						   //有错误
						   art.dialog({ icon: 'error', title:"提示",content: data.msg, lock: true,ok:true});
						   }
						
					   }
					});
			  	return false;
				
			 }
		});
		

	
	});
	
//-->
</script>
    <div class="content-box">
      <!-- Start Content Box -->
      <div class="content-box-header">
        <h3>消费记录</h3>
        <ul class="content-box-tabs">
          <li><a href="#tab1" class="default-tab">列表</a></li>
<!--           <li><a href="#tab2">查询</a></li> -->
        </ul>
        <div class="clear"></div>
      </div>
      <!-- End .content-box-header -->
      <div class="content-box-content">
        <div class="tab-content default-tab" id="tab1">
        <c:if test="${ tip != null }">    
          <div class="notification attention png_bg"> <a href="#" class="close"><img src="${pageContext.request.contextPath}/images/icons/cross_grey_small.png" title="Close this notification" alt="close" /></a>
            <div> ${ tip } </div>
          </div>
          </c:if>
          <table>
            <thead>
              <tr>
               <td colspan="5">
                <div class="bulk-actions align-left">
<%--                   <a class="button" href="sys/to-edit-record?todo=create&type=99">新建</a> --%>
                </div>
               </td>
              </tr>
              <tr style="background-color:silver;">
                <th  width="5%">
               <!--  <input class="check-all" type="checkbox" /> -->  
                </th>
                <th width="20%">订单号</th>
                <th width="20%">电子券序列号</th>
                <th width="20%">用户</th>
                <th >使用日期</th>
              </tr>
            </thead>
            <tfoot>
              <tr>
                <td colspan="5">
                 	<jsp:include  page="page.jsp" flush="true"/>
                  <!-- End .pagination -->
                  <div class="clear"></div>
                </td>
              </tr>
            </tfoot>
            <tbody id="recordItems">
             <c:if test="${empty page.datas}">
              <tr>
	          	<td colspan="5">
	          		<div >查找不到相关记录信息！</div>
	          		<input name="record" type="hidden" />
	          	</td>
              </tr>
	         </c:if>
             <c:if test="${!empty page.datas}">
	          <c:forEach items="${page.datas}" var="record" varStatus="i">
	          <tr class="item" title="时间：<fmt:formatDate value='${record.consumptionTime }' pattern='yyyy-MM-dd HH:mm:ss'/>">
	            <td>
                  ${i.index + 1 }
                </td>
                <td>${record.orderNumber }</td>
                <td>${record.serialNumber }</td>
                <td>${record.userId }</td>
                <td >
					<fmt:formatDate value='${record.consumptionTime }' pattern='yyyy-MM-dd HH:mm:ss'/>
                </td>
	          </tr>
	          </c:forEach>
          </c:if>
            
            </tbody>
          </table>
        </div>
          <!-- End #tab1 -->
        <div class="tab-content" id="tab2">
          <form action="${pageContext.request.contextPath}/consumer-records" method="get">
            <fieldset>
          	<input type="hidden" name="ps" value="${param.ps}"/>
            <!-- Set class to "column-left" or "column-right" on fieldsets to divide the form into columns -->
            <p>
              <label>用户名</label>
              <input class="text-input small-input" type="text" id="username" name="username" />
              </p>
            <p>
              <label>昵称</label>
              <input class="text-input small-input" type="text" id="nickname" name="nickname" />
              </p>
            <p>
              <label>内容</label>
              <input class="text-input small-input" type="text" id="content" name="content" />
              </p>
            <p>
              <label>时间</label>
              <input id="q_startTime" name="q_startTime" type="text" class="Wdate text-input small-input" onclick="javascript:var endTime=$dp.$('q_endTime');WdatePicker({lang:'zh',skin:'whyGreen',dateFmt:'yyyy-MM-dd HH:mm:ss',onpicked:function(){endTime.focus();},maxDate:'#F{$dp.$D(\'q_endTime\')}'});"/> 
              -  
              <input id="q_endTime" name="q_endTime" type="text" class="Wdate text-input small-input" onclick="javascript:WdatePicker({lang:'zh',skin:'whyGreen',dateFmt:'yyyy-MM-dd HH:mm:ss',minDate:'#F{$dp.$D(\'q_startTime\')}'});"/>
            </p>
            <p>
              <input class="button" type="submit" value="查询" />
            </p>
            </fieldset>
            <div class="clear"></div>
            <!-- End .clear -->
          </form>
        </div>
        <!-- End #tab2 -->
      </div>
      <!-- End .content-box-content -->
    </div>
    <div class="clear"></div>
    <!-- End .clear -->
   